<template>
  <a-form
    ref="formRef"
    :model="formState"
    name="basic"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 14 }"
    autocomplete="off"
    @finish="onFinished"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="号码" name="no" :rules="[{ required: true, message: '请输入' }]">
      <a-input v-model:value="formState.no" />
    </a-form-item>

    <a-form-item label="名称" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>

    <a-form-item label="类型" name="typeId">
      <a-select ref="select" placeholder="请选择" v-model:value="formState.typeId">
        <a-select-option v-for="item in typeOptions" :key="item.id" :value="item.id">{{
          item.name
        }}</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item
      label="传输模式"
      name="tranModeId"
      :rules="[{ required: true, message: '请输入' }]"
    >
      <a-select ref="select" placeholder="请选择" v-model:value="formState.tranModeId">
        <a-select-option v-for="item in modeOptions" :key="item.id" :vlalue="item.id">{{
          item.name
        }}</a-select-option>
        <a-select-option value="2">主动采集</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="采集间隔" name="gap">
      <a-select ref="select" placeholder="请选择" v-model:value="formState.gatherInterval">
        <a-select-option :value="10 * 60">10分钟</a-select-option>
        <a-select-option :value="30 * 60">半个小时</a-select-option>
        <a-select-option :value="60 * 60">1个小时</a-select-option>
        <a-select-option :value="4 * 60 * 60">2个小时</a-select-option>
        <a-select-option :value="5 * 60 * 60">4个小时</a-select-option>
        <a-select-option :value="6 * 60 * 60">6个小时</a-select-option>
        <a-select-option :value="7 * 60 * 60">12个小时</a-select-option>
        <a-select-option :value="8 * 60 * 60">24个小时</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="采集托管" name="status">
      <a-radio-group v-model:value="formState.status">
        <a-radio :value="true">启用</a-radio>
        <a-radio :value="false">禁用</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="备注" name="comment">
      <a-input v-model:value="formState.comment" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
      <a-button type="primary" html-type="submit">确定</a-button>
    </a-form-item>
  </a-form>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';

interface FormState {
  id: Number | null;
  no: string;
  name: string;
  typeId: Number | null;
  tranModeId: Number | null;
  gatherInterval: Number | null;
  comment: string;
  projectId: Number | null;
  serialNo: string;
  status: boolean;
  // enable: boolean;
  // serialNo: string;
  // pid: Number;
}
export default defineComponent({
  setup(props, { emit }) {
    const typeOptions = ref([]);
    const modeOptions = ref([]);
    const formRef = ref();

    let formState = ref<FormState>({
      id: null,
      no: '',
      name: '',
      typeId: null,
      tranModeId: null,
      gatherInterval: null,
      comment: '',
      projectId: null,
      serialNo: '',
      status: false,
    });

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    const setForm = (dtu) => {
      // console.log(dtu.code, dtu.id);
      formState.value = {
        id: dtu.id,
        no: dtu.no,
        name: dtu.name,
        typeId: dtu.typeId,
        tranModeId: dtu.tranModeId,
        gatherInterval: dtu.gatherInterval,
        comment: dtu.comment,
        projectId: dtu.projectId,
        serialNo: dtu.serialNo,
        status: !!dtu.status,
      };
    };

    const onFinished = () => {
      const params = {
        ...formState.value,
        status: formState.value.status ? 1 : 0,
      };
      defHttp
        .post({
          url: '/dtu/update',
          params,
        })
        .then((res) => {
          emit('updated', params);
        });
    };

    function getTypeOptions() {
      defHttp.get({ url: '/dtu-type/get-all' }).then((res) => {
        typeOptions.value = res.data;
      });
    }

    function getModeOptions() {
      defHttp.get({ url: '/dtu-tran-mode/get-all' }).then((res) => {
        modeOptions.value = res.data;
      });
    }

    getTypeOptions();
    getModeOptions();

    return {
      formState,
      onFinishFailed,
      setForm,
      formRef,
      onFinished,
      typeOptions,
      modeOptions,
    };
  },
});
</script>
  
